<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    //就是http://127.0.0.1:8080/pic/
    String basePath = "http://106.53.67.228/";
%>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小说网</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/vip.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css">
    <style>
        .icon {

            width: 1em; height: 1em;

            vertical-align: -0.15em;

            fill: currentColor;

            overflow: hidden;

        }
    </style>
<body>
<div id="topOne">
    <div class="nav-link">
        <a class="act" href="${pageContext.request.contextPath}/index" >畅读中文网</a><%--<em>|</em>--%>
        <div class="user" >
            <font class="iconfont">
                <c:choose>
                    <c:when test="${user ne null }">
                        欢迎 ${user.username }
                        <c:if test="${userVip eq 0}">&#xe72f;</c:if>
                        <c:if test="${userVip eq 1}"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huiyuanjulebu1"></use>
                        </svg></c:if>
                    </c:when>
                    <c:otherwise><a href="${pageContext.request.contextPath}/loginAndRegist.jsp">登录</a></c:otherwise>
                </c:choose>
            </font>
            |
            <font class="iconfont">
                <c:choose>
                    <c:when test="${user ne null }"><a href="<c:url value="/user/logout"/>">退出</a></c:when>
                    <c:otherwise><a href="${pageContext.request.contextPath}/loginAndRegist.jsp">注册</a></c:otherwise>
                </c:choose>
            </font>
        </div>
    </div>
</div>
<div id="Top">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/index">
            <img src="${pageContext.request.contextPath}/static/images/logoA.png" width="100px" height="50px" />
        </a>
    </div>
    <div class="search">
        <form id="search" action="<c:url value="/novel/findNovel" />" method="post">
            <div id="searchTxt" class="searchTxt">

                <div class="searchMenu">

                    <%--<div class="searchSelected" id="searchSelected">玄幻</div>
                    <div style="display:none;" class="searchTab" id="searchTab">--%>
                        <ul>
                            <select  id="sel" name="novel.typeId" style="height:39px;border:0;padding:2px;margin:0;">
                                <option value="">--请选择--</option>
                                <c:forEach items="${noveltypeList }" var="noveltype">
                                    <option  style="background-color:transparent;"  value="${noveltype.id }">
                                            ${noveltype.typename }
                                    </option>
                                </c:forEach>
                            </select>

                        </ul>

                    </div>
                <input name="novel.novelname" type="text" />
                <div class="searchBtn">
                    <button id="searchBtn"></button>
                </div>
                </div>


            </div>

        </form>
    </div>
</div>

<div id="Logo">
    <ul>
        <li class="first">
						<span class="iconfont">
							<div>
							<i></i>
							<i></i>
							<i></i>
							</div>
							排行
						</span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel" title="首页">全部作品</a>
        </li>
       <%-- <li>
            <a href="#" title="排行">排行</a>
        </li>--%>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=1">VIP</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/novel/findNovel?novel.isFree=0">免费</a>
        </li>
        <li class="last"></li>
    </ul>
</div>
<!--主体-->

<div id="Foucs">
    <div class="FoucsCommon">
        <div class="Menu">
            <ul>
                <c:forEach items="${novelHotList}" var="hot" varStatus="i">
                    <li class="col1">
                        <c:forEach items="${noveltypeList }" var="noveltype">
                            <c:choose>
                                <c:when test="${noveltype.id eq hot.typeId}">
                                    <h3>${noveltype.typename}</h3>
                                </c:when>
                            </c:choose>
                        </c:forEach>
                        <p style="margin-left:10px;font-size:15px;">
                            <a href="<c:url value="/novel/novelSearch?id=${hot.id}" />">${hot.novelname}</a>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-remen"></use>
                            </svg><span style="color:firebrick;">${hot.dcounts}</span>
                        </p>
                    </li>
                </c:forEach>
            </ul>
        </div>

        <div class="flash" >
            <!--左右切换按扭-->
            <a href="javascript:void(0)" class="prev"></a>
            <a href="javascript:void(0)" class="next"></a>

            <!--图片滚动部分-->
            <div class="scroll">
                <c:forEach items="${novelSliderList}" var="slider">
                   <a href="<c:url value="/novel/novelSearch?id=${slider.id}" />"><img src="<%=basePath%>${slider.pic}" width="100%" height="100%" /></a>
                </c:forEach>
            </div>

            <!--滚动按扭部分-->
            <div class="But">
                <span class="hover"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <%--<span></span>--%>
            </div>
        </div>
        <!--轮播图结束-->

        <div class="news">
            <div class="newsback"></div>
            <div class="newsCommon">
                <!--小说快讯 开始-->

                <h3>小说快讯</h3>
                <ul>
                    <c:forEach items="${newsList}" var="news" varStatus="i">
                        <li>
                            <c:choose>
                                <c:when test="${i.index eq 0 }">
                                    <a href="${pageContext.request.contextPath}/novel/findNews?id=${news.id}" class="first" title="">
                                    <font>[ 特刊 ]</font> ${news.title}</a></c:when>
                                <c:otherwise>
                                    <a href="${pageContext.request.contextPath}/novel/findNews?id=${news.id}" title="">
                                    <font>[ 特刊 ]</font> ${news.title}</a>
                                </c:otherwise>
                            </c:choose>

                        </li>
                    </c:forEach>
                </ul>
                <!--小说 结束-->
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
</div>
<!--主体结束-->
<div class="fenlei">
    <p class="ti">编辑推荐</p>
    <div class="Part">

        <div class="PartL">

            <!--左右切换按扭-->
            <img src="${pageContext.request.contextPath}/static/images/prev.png" class="prev" />
            <img src="${pageContext.request.contextPath}/static/images/next.png" class="next" />

            <div class="imgList">
                <ul>
                    <c:forEach items="${novelRecList}" var="rec" >
                        <li>
                            <img src="<%=basePath%>${rec.pic}" width="280" height="280" />
                            <h3>${rec.detail}</h3>
                            <span>点击：<font><a style="color:red" href="${pageContext.request.contextPath}/novel/novelSearch?id=${rec.id}">立即阅读</a></font></span>
                        </li>
                    </c:forEach>

                    <%--<li>
                        <img src="${pageContext.request.contextPath}/static/images/ntxs.jpg" width="280" height="280" />
                        <h3>掌天毒之珠，承邪神之血，修逆天之力，一代邪神，君临天下！</h3>
                        <span>点击：<font>立即阅读</font></span>
                    </li>
                    <li>
                        <img src="${pageContext.request.contextPath}/static/images/2849619-1530375219000.jpg" width="280" height="280" />
                        <h3>谋能生乱，亦能止乱</h3>
                        <span>点击：<font>立即阅读</font></span>
                    </li>
                    <li>
                        <img src="${pageContext.request.contextPath}/static/images/ims.jpg" width="280" height="280" />
                        <h3>迎风挥击千层浪，少年不败热血！</h3>
                        <span>点击：<font>立即阅读</font></span>
                    </li>--%>
                </ul>
            </div>
        </div>

        <div class="PartR">
            <div class="infoBox">
                <section class="book">

                    <ul>
                        <c:forEach items="${novelDownList}" var="down">
                            <li class="box">
                                <img src="<%=basePath%>${down.pic}" width="150px" height="175px">

                                    <div>
                                        <a href="${pageContext.request.contextPath}/novel/novelSearch?id=${down.id}"><h2>${down.novelname}</h2></a>
                                    </div>

                            </li>
                        </c:forEach>
                    </ul>
                </section>
            </div>

        </div>
        <div style="clear:both"></div>
    </div>

    <div class="Footer">
        <div class="footer_nav">
            <a>关于畅读小说网</a>&#12288;|&#12288;
            <a>商务合作</a>&#12288;|&#12288;
            <a>友情链接</a>&#12288;|&#12288;
            <a>帮助中心</a>&#12288;|&#12288;
            <a>用户守则</a>&#12288;|&#12288;
            <a>网站地图</a>&#12288;|&#12288;
            <a>诚聘精英</a>&#12288;|&#12288;
            <a>畅读</a>
        </div>
        <p>
            <a>Copyright (C) 2018-2019 www.changdu.com All Rights Reserved </a>
            <br />--畅读权利声明。
        </p>
    </div>
    <div class="content">
        <p><a href="javascript:void(0)" onClick="huiyuanToggle()" class="dashang" title="点击成为会员">VIP</a></p>
        <div class="hide_box"></div>
        <div class="shang_box">
            <a class="shang_close" href="javascript:void(0)" onClick="huiyuanToggle()" title="关闭"><img src="${pageContext.request.contextPath}/static/images/close.jpg" alt="取消" /></a>
            <img class="shang_logo" src="${pageContext.request.contextPath}/static/images/logo.png" alt="畅读小说" />
            <div class="shang_tit">
                <p>感谢您的支持，我们会继续努力的!</p>
            </div>
            <div class="shang_payimg">
                <img src="${pageContext.request.contextPath}/static/images/alipayimg.jpg" alt="扫码充会员" title="扫一扫" />
            </div>
            <div class="pay_explain">扫码支付，成为会员</div>
            <div class="shang_payselect">
                <div class="pay_item checked" data-id="alipay">
                    <span class="radiobox"></span>
                    <span class="pay_logo"><img src="${pageContext.request.contextPath}/static/images/alipay.jpg" alt="支付宝" /></span>
                </div>
                <div class="pay_item" data-id="weipay">
                    <span class="radiobox"></span>
                    <span class="pay_logo"><img src="${pageContext.request.contextPath}/static/images/wechat.jpg" alt="微信" /></span>
                </div>
            </div>
            <div class="shang_info">
                <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可充值成为会员哦</p>
                <form  method="post" action="<c:url value="/user/bevip"/>" >
                    <p><input type="submit" class="bevip" value="充值成功" />，&nbsp;从这里开始，Vip精彩与您同在</p>
                    <input type="hidden" name="username" id = "username" value="${sessionScope.user.username}"/>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if($("#username").val() == "") {
                $(".content").prop("style","display:none");
            }
        });
        $(function(){
            $(".pay_item").click(function(){
                $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
                var dataid=$(this).attr('data-id');
                $(".shang_payimg images").attr("src","images/"+dataid+"${pageContext.request.contextPath}/static/images.jpg");
                $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
            });
        });
        function huiyuanToggle(){
                $(".hide_box").fadeToggle();
                $(".shang_box").fadeToggle();
        }
    </script>
</body>
<!--引用外部jquery文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/iconfont.js"></script>
<script type="text/javascript">
    $("img.prev").click(function() {

        $(".imgList ul").animate({
            "left": -280
        }, 500, function() {
            $(this).append($(this).find("li:first"));
            $(this).css("left", 0);
        });

    });

    $("img.next").click(function() {

        autoPlay();

    });

    var cleartime = setInterval(autoPlay, 2000);
    //鼠标放上去，停止播入
    $("img.next,img.prev").hover(function() {
        clearInterval(cleartime);
    }, function() {
        cleartime = setInterval(autoPlay, 3000);
    });

    function autoPlay() {

        $(".imgList ul").prepend($(".imgList ul li:last"));
        $(".imgList ul").css("left", -280);
        $(".imgList ul").animate({
            "left": 0
        }, 500);
    }
    //鼠标导航滑块跟随效果

    $(".PartM ul li:nth-of-type(n)").hover(function() {
        $(".PartM ul li:nth-of-type(n)").css({
            "background": "#efefef",
            "color": "#666"
        });
        $(this).css({
            "width": "100%",
            "background": "#00A1D2",
            "border": "none"
        });
    });

    //图片选项卡
    $(function() {
        $(".PartR>div").hide();
        $(".PartR>div:eq(0)").show();

        $(".PartM a").click(function() {
            var n = $(".PartM a").index(this);
            $(".PartM a").index(this);
            $(".PartR>div").hide();
            $(".PartR>div:eq(" + n + ")").show();
        })

    });

    //提交
    $(function() {
        $("#searchBtn").click(function () {
            $("#search").submit();
        });
    });

    //轮播图首张图片
    $(function(){
        $("#Foucs .FoucsCommon .flash").css("background","url(../images/five.jpg);");
    });
</script>

</html>